<div class="apos-ui" data-apos-area-controls data-apos-area-controls-original>
  <div class="apos-area-controls">
    <div class="apos-dropdown apos-dropdown--area-controls apos-dropdown--down" data-apos-dropdown="{{ direction }}">
      <div class="apos-button apos-button--major apos-button--circular apos-button--in-context" data-apos-add-content>
        <i class="fa fa-plus"></i>
      </div>
      {%- if data.options.widgetGroups -%}
        <ul class="apos-dropdown-items apos-widget-groups">
          {%- for label, widgets in data.options.widgetGroups -%}
            <li class="apos-dropdown-item apos-widget-group" data-apos-widget-group>
              <span class="apos-widget-group-toggle"></span>
              {{ __ns('apostrophe', label) }}
              <ul class="apos-widget-group-widgets">
                {%- for name in widgets -%}
                  {%- set options = data.options.widgets[name] -%}
                  <li class="apos-widget-group-widget" data-apos-add-item="{{ name }}">{{ options.addLabel or __ns('apostrophe', data.widgetManagers[name].label) }}</li>
                {%- endfor -%}
              </ul>
            </li>
          {%- endfor -%}
        </ul>
      {%- else -%}
        <ul class="apos-dropdown-items" data-apos-dropdown-items>
          {%- for name, options in data.options.widgets -%}
            {%- if data.widgetManagers[name] -%}
              {%- if not options.readOnly -%}
                <li class="apos-dropdown-item" data-apos-add-item="{{ name }}">{{ options.addLabel or __ns('apostrophe', data.widgetManagers[name].label) }}</li>
              {% endif %}
            {%- else -%}
              {{ apos.log("Your area contains a widget of type " + name + " but there is no manager for that type. Maybe you forgot to configure the " + name + "-widgets module?") }}
            {%- endif -%}
          {%- endfor -%}
        </ul>
      {%- endif -%}
    </div>
    <div class="apos-area-divider"></div>
  </div>
</div>
